<template>
    <div class="register-container">
        <n-card class="register-card" :bordered="false">
            <div class="register-header">
                <h1 class="register-title">创建账户</h1>
                <p class="register-subtitle">注册新用户账户</p>
            </div>

            <n-form
                ref="formRef"
                :model="registerForm"
                :rules="rules"
                @submit.prevent="handleRegister"
            >
                <n-form-item path="username" label="用户名">
                    <n-input
                        v-model:value="registerForm.username"
                        placeholder="请输入用户名"
                        size="large"
                        clearable
                    >
                        <template #prefix>
                            <n-icon>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item path="email" label="邮箱">
                    <n-input
                        v-model:value="registerForm.email"
                        type="email"
                        placeholder="请输入邮箱"
                        size="large"
                        clearable
                    >
                        <template #prefix>
                            <n-icon>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
                                </svg>
                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item path="password" label="密码">
                    <n-input
                        v-model:value="registerForm.password"
                        type="password"
                        placeholder="请输入密码（至少6位）"
                        size="large"
                        show-password-on="click"
                        clearable
                    >
                        <template #prefix>
                            <n-icon>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                                    <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                </svg>
                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>

                <n-form-item path="confirmPassword" label="确认密码">
                    <n-input
                        v-model:value="registerForm.confirmPassword"
                        type="password"
                        placeholder="请再次输入密码"
                        size="large"
                        show-password-on="click"
                        clearable
                    >
                        <template #prefix>
                            <n-icon>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="16"
                                    height="16"
                                    viewBox="0 0 24 24"
                                    fill="none"
                                    stroke="currentColor"
                                    stroke-width="2"
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                >
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                </svg>
                            </n-icon>
                        </template>
                    </n-input>
                </n-form-item>

                <n-button
                    type="primary"
                    size="large"
                    :loading="loading"
                    :disabled="loading"
                    attr-type="submit"
                    class="register-btn"
                >
                    {{ loading ? '注册中...' : '注册' }}
                </n-button>
            </n-form>

            <div v-if="error" class="error-message">
                <n-alert type="error" :show-icon="false">
                    {{ error }}
                </n-alert>
            </div>

            <div v-if="success" class="success-message">
                <n-alert type="success" :show-icon="false"> 注册成功！正在跳转... </n-alert>
            </div>

            <div class="login-link">
                <span>已有账号？</span>
                <router-link to="/login">立即登录</router-link>
            </div>
        </n-card>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.js'

const router = useRouter()
const userStore = useUserStore()

const registerForm = ref({
    username: '',
    email: '',
    password: '',
    confirmPassword: '',
})

const loading = ref(false)
const error = ref('')
const success = ref(false)

const rules = {
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: ['input', 'blur'],
        },
    ],
    email: [
        {
            required: true,
            message: '请输入邮箱',
            trigger: ['input', 'blur'],
        },
        {
            type: 'email',
            message: '请输入有效的邮箱地址',
            trigger: ['input', 'blur'],
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: ['input', 'blur'],
        },
        {
            min: 6,
            message: '密码长度至少6位',
            trigger: ['input', 'blur'],
        },
    ],
    confirmPassword: [
        {
            required: true,
            message: '请再次输入密码',
            trigger: ['input', 'blur'],
        },
        {
            validator: (rule, value) => {
                return value === registerForm.value.password
            },
            message: '两次输入的密码不一致',
            trigger: ['input', 'blur'],
        },
    ],
}

const handleRegister = async () => {
    error.value = ''
    success.value = false

    loading.value = true

    try {
        const userData = {
            username: registerForm.value.username,
            email: registerForm.value.email,
            password: registerForm.value.password,
        }

        const result = await userStore.register(userData)

        if (result.success) {
            success.value = true
            // 注册成功，2秒后跳转到首页
            setTimeout(() => {
                router.push('/')
            }, 2000)
        } else {
            error.value = result.error || '注册失败'
        }
    } catch (err) {
        error.value = '注册失败，请稍后重试'
        console.error('Register error:', err)
    } finally {
        loading.value = false
    }
}
</script>

<style scoped>
.register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.register-card {
    width: 100%;
    max-width: 420px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.register-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.register-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.register-subtitle {
    color: #666;
    font-size: 1rem;
    margin: 0;
}

:deep(.n-form-item) {
    margin-bottom: 1.5rem;
}

:deep(.n-form-item-label) {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

:deep(.n-input) {
    border-radius: 8px;
}

:deep(.n-input .n-input__border) {
    border-radius: 8px;
}

.register-btn {
    width: 100%;
    margin-top: 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    height: 48px;
}

.error-message {
    margin-top: 1rem;
}

.success-message {
    margin-top: 1rem;
}

:deep(.n-alert) {
    border-radius: 8px;
}

.login-link {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    color: #666;
}

.login-link a {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-link a:hover {
    color: #764ba2;
    text-decoration: underline;
}
</style>
